<!--
设备概览页面
-->
<template>
  <div style="margin-left: 14px">
    <div>
      <h3>{{ $t('exportPdf.deviceOverview') }}</h3>
      <rj-table
        bordered
        :data-source="totalDataSource"
        :columns="totalColumns"
        :rowKey="
          (record, index) => {
            return record.id;
          }
        "
        :pagination="false"
        size="small"
      >
        <template slot="remark" slot-scope="text, record">
          <DeviceAllDescWin
            :title="$t('exportPdf.productDecript')"
            :record="record"
            :value="record.remark"
            @change="valueChange(record, $event)"
          ></DeviceAllDescWin>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div v-if="record.addingMode == 'MANUAL'">
            <rj-space>
              <a href="javascript:;" @click="onEditTotal(record)"
                ><icon-font type="ic-edit" style="font-size: 16px"
              /></a>
              <a href="javascript:;" @click="onDeleteTotal(record)"
                ><icon-font type="ic-delete" style="font-size: 16px"
              /></a>
            </rj-space>
          </div>
        </template>
      </rj-table>
      <div style="margin-top: 8px">
        <a href="javascript:;" @click="addDeviceTotal"
          ><a-icon type="plus" /> {{ $t('exportPdf.addDeviceOverview') }}</a
        >
      </div>
    </div>

    <DeviceAllWin
      ref="deviceDetailAllWin"
      @getTotalDevice="getTotalDevice"
      :oldData="oldAllData"
    ></DeviceAllWin>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import DeviceAllWin from './deviceAllWin.vue';
import DeviceAllDescWin from './deviceAllDescWin.vue';
import { i18nRender } from '@/locales';

export default {
  name: 'deviceAllList',
  props: {},
  components: {
    DeviceAllWin,
    'rj-table': RjTable,
    DeviceAllDescWin,
  },
  data() {
    return {
      totalColumns: [
        {
          title: i18nRender('exportPdf.sno'),
          dataIndex: 'num',
          key: 'num',
          width: '50px',
        },
        {
          title: i18nRender('exportPdf.deviceType'),
          dataIndex: 'productType',
          key: 'productType',
          width: '120px',
        },
        {
          title: i18nRender('exportPdf.deviceSN'),
          dataIndex: 'productClass',
          key: 'productClass',
        },
        {
          title: i18nRender('exportPdf.productDecript'),
          dataIndex: 'remark',
          key: 'remark',
          scopedSlots: { customRender: 'remark' },
        },
        {
          title: i18nRender('exportPdf.number'),
          dataIndex: 'amount',
          width: '80px',
          key: 'amount',
        },
        {
          title: i18nRender('exportPdf.oprate'),
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          width: '80px',
          key: 'operation',
        },
      ],
      totalDataSource: [],
      isDeviceTotal: false,
      oldAllData: {},
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      this.getTotalDevice();
    },
    /**
     * 获取设备概览
     */
    getTotalDevice() {
      let api = `${maccApi.DELIVERY_DEVICE_OVERVIEW.replace(
        '{groupId}',
        this.groupId
      )}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        ret.list.sort((a, b) => {
          return a.addingMode > b.addingMode ? 1 : -1;
        });
        this.totalDataSource = this.addNum(ret.list);
      });
    },

    addNum(list) {
      let i = 1;
      let isTxt = false;
      list = list.map((item) => {
        item.num = i++;
        if (
          item.productClass &&
          item.productClass.indexOf('NBR') != -1 &&
          item.productType == this.$t('exportPdf.gateway')
        ) {
          isTxt = true;
        }
        return item;
      });
      if (isTxt) {
        this.$emit('isShowDownloadTxt');
      }

      return list;
    },
    addDeviceTotal() {
      this.oldAllData = {};
      this.$refs.deviceDetailAllWin.addDeviceTotal();
    },
    onEditTotal(record) {
      this.oldAllData = { ...record };
      this.$refs.deviceDetailAllWin.addDeviceTotal();
    },
    onDeleteTotal(record) {
      let api = `/delivery/device/overview/del?groupId=${this.groupId}&id=${record.id}`;
      let self = this;
      this.$confirm({
        title: this.$t('exportPdf.isDelete'),
        onOk() {
          requestHttp({
            api: api,
            method: 'DELETE',
          }).then(() => {
            self.getTotalDevice();
          });
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    //设置产品描述
    async valueChange(record, value) {
      let param = {
        remark: value,
        id: record.id,
        groupId: this.groupId,
      };
      const results = await requestHttp({
        api: `${maccApi.DELIVERY_DEVICE_OVERVIEW_REMARK}`,
        method: 'PUT',
        params: param,
      });
      if (results && results.code == 0) {
        this.$message.success(this.$t('exportPdf.settingSuccess'));
        this.initView();
      } else {
        this.$message.error(results.msg);
      }
    },
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped>
h3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 10px;
}
</style>
